<template>
  <div class="yth-container">
    <el-tabs v-model="activeTab" type="card" @tab-click="handleTabClick">
      <el-tab-pane label="上传文件" name="upload">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="headers"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :before-upload="beforeUpload"
          :on-success="handleSuccess"
          :on-error="handleError"
          multiple
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList"
          :data="uploadData"
        >
          <el-button type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传 xls 或 xlsx 文件，且不超过5MB</div>
        </el-upload>
      </el-tab-pane>

      <el-tab-pane label="文件列表" name="list">
        <el-table :data="fileListData" style="width: 100%" v-loading="loading">
          <el-table-column prop="file_name" label="文件名" width="180"></el-table-column>
          <el-table-column prop="file_size" label="文件大小" width="180"></el-table-column>
          <el-table-column prop="file_ctime" label="上传日期"></el-table-column>
          <el-table-column prop="file_type" label="文件类型" width="120"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDownload(scope.row)">下载</el-button>
              <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>

      <el-tab-pane label="文件下载" name="download">
        <el-table :data="downloadList" style="width: 100%">
          <el-table-column prop="name" label="文件名" width="180"></el-table-column>
          <el-table-column prop="size" label="文件大小" width="180"></el-table-column>
          <el-table-column prop="date" label="上传日期"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDownload(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Yth',
  data () {
    return {
      activeTab: 'upload',
      uploadUrl: 'http://127.0.0.1:5002/ns_yth/ythupload', // 上传文件的接口地址
      listUrl: 'http://127.0.0.1:5002/ns_yth/ythuploadlist', // 文件列表的接口地址
      downloadBaseUrl: 'http://127.0.0.1:5002/ns_yth/download', // 文件下载的基础地址
      headers: {
        'accept': 'application/json',
        'Authorization': 'Bearer ' + (localStorage.getItem('access_token') || '') // 如果有 token，可以加上
      },
      uploadData: {}, // 上传时附加的其他数据
      fileList: [], // 上传的文件列表
      fileListData: [], // 从后端获取的文件列表数据
      downloadList: [], // 可供下载的文件列表
      loading: false // 加载状态
    }
  },
  methods: {
    handleTabClick (tab) {
      if (tab.name === 'list') {
        this.fetchFileList() // 切换到文件列表时，自动获取文件列表
      }
    },
    handleRemove (file, fileList) {
      console.log('File removed:', file, fileList)
      this.fileList = fileList
    },
    handlePreview (file) {
      console.log('File preview:', file)
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove (file) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    beforeUpload (file) {
      // 文件类型校验：支持 xls 和 xlsx
      const isExcel =
        file.type === 'application/vnd.ms-excel' || // xls 文件类型
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' // xlsx 文件类型

      if (!isExcel) {
        this.$message.error('只能上传 xls 或 xlsx 文件')
        return false
      }

      // 文件大小校验（5MB）
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isLt5M) {
        this.$message.error('文件大小不能超过 5MB')
        return false
      }

      return true
    },
    handleSuccess (response, file, fileList) {
      console.log('上传成功:', response)
      this.$message.success('文件上传成功')
      this.fileList = fileList
      this.fetchFileList() // 上传成功后，刷新文件列表
    },
    handleError (err, file, fileList) {
      console.error('上传失败:', err)
      this.$message.error('文件上传失败')
      this.fileList = fileList
    },
    fetchFileList () {
      this.loading = true // 开始加载
      axios.post(this.listUrl, {}, { headers: this.headers })
        .then(response => {
          console.log('文件列表获取成功:', response.data)
          if (response.data.message && response.data.message.result === 1) {
            this.fileListData = response.data.message.data // 解析并存储文件列表数据
          } else {
            this.$message.error('文件列表获取失败：' + (response.data.message.result_text || '未知错误'))
          }
        })
        .catch(error => {
          console.error('文件列表获取失败:', error)
          this.$message.error('文件列表获取失败')
        })
        .finally(() => {
          this.loading = false // 结束加载
        })
    },
    handleDownload (file) {
      console.log('Download file:', file)
      const downloadUrl = `${this.downloadBaseUrl}/${encodeURIComponent(file.file_name)}`
      axios.get(downloadUrl, {
        headers: this.headers,
        responseType: 'blob' // 重要：确保响应类型为 blob
      })
        .then(response => {
          // 创建一个临时的 <a> 标签用于下载
          const url = window.URL.createObjectURL(new Blob([response.data]))
          const link = document.createElement('a')
          link.href = url

          // 从响应头中获取文件名
          const contentDisposition = response.headers['content-disposition']
          let fileName = file.file_name // 默认使用后端返回的文件名
          if (contentDisposition && contentDisposition.includes('filename*=')) {
            // 如果响应头中有文件名，则使用响应头中的文件名
            fileName = decodeURIComponent(contentDisposition.split('filename*=')[1].split("'")[2])
          }

          link.setAttribute('download', fileName) // 设置下载的文件名
          document.body.appendChild(link)
          link.click() // 触发下载
          document.body.removeChild(link) // 移除 <a> 标签
          window.URL.revokeObjectURL(url) // 释放 URL 对象
        })
        .catch(error => {
          console.error('文件下载失败:', error)
          this.$message.error('文件下载失败')
        })
    },
    handleDelete (file) {
      console.log('Delete file:', file)
      // 这里可以添加文件删除的逻辑
    }
  },
  mounted () {
    this.fetchFileList() // 组件加载时，自动获取文件列表
  }
}
</script>

<style scoped>
.yth-container {
  padding: 20px;
}

.upload-demo {
  text-align: center;
}

.el-upload__tip {
  margin-top: 10px;
  font-size: 12px;
  color: #606266;
}
</style>
